.container {
  width: 100%;
  height: 800px;

  
  .cardtitle {
    width: 60%;
    margin-top: 5px;
    height: 23%;
    margin: 20px auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px;
    background-color: #fff;
    .columnName{
      font-size: 20px;
      font-weight: bold;
    } 
    .columnImg{
      background: rgb(224,236,247);
      // border: 1px solid grey;
      color: rgb(55,126,242);
      display: flex;
      padding: 10px;
      margin-top: 10px;
      .columnWorker{
        margin-top: 0.5%;
        margin-left: 2%;
        font-size: 16px;
        font-weight: bold;
      }
      .large{
        height: 4%;
        width: 4%;
        border-radius: unset;
      }
    }
    .columntime{
      // border: 1px solid grey;
      float: right;
      color: grey;
      padding: 10px;
    }
  }
  .cardcontent {
    width: 100%;
    margin-top: 5px;
    // height: 80px;
    margin: 60px auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px;
    background-color: #fff;
    .columnName{
      font-size: 16px;
      color: rgb(55,126,242);
    }
  }

  .box{
    // border: 1px solid black;
    margin-top: 10%;
    // margin: ;
    .card {
      width: 100%;
      margin-top: 5px;
      height: 80px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      padding: 10px;
      background-color: #fff;
  
      .top {
        font-weight: 600;
        width: 100%;
        color: #787474;
      }
  
      .middle {
        font-size: 12px;
  
        .title {
          font-size: 14px;
          font-weight: 600;
        }
      }
  
      .bottom {
        display: flex;
        flex-direction: row-reverse;
  
        .icon {
          margin-right: 10px;
        }
      }
    }
    .card:hover {
      background: #e0ecf7;
    }
  }
}
